<template>
  <div class="problem">
    <Header></Header>
    <div class="problem2">
      <div>
        <img src="../assets/img/back/help.png"   style="width: 1200px"alt="">
      </div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <div class="problem3" v-for="problem in problem_list" :key="problem.id">
          <el-collapse-item :title="problem.id+'.  '+problem.problem" :name="problem.id">
            <div>{{ problem.answer }}</div>
          </el-collapse-item>
        </div>
      </el-collapse>
    </div>


    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  name: "Problem",
  data() {
    return {
      activeNames: ['1'],
      problem_list: [],
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  },
  components: {
    Header,
    Footer,

  },
  created() {
    this.$http.get(`${this.$settings.base_url}problem/problem/`).then(res => {
      this.problem_list = res.data
      console.log(this.problem_list)
    })
  }
}
</script>

<style scoped>
.problem2 {
  width: 1200px;
  margin: 0 auto;
}

.problem3 {
  width: 1200px;
  text-indent: 2px;
}
</style>